<template>
	<view>
		<u-navbar title=" " placeholder :bgColor="bgColor" :border="false">
			<view class="left-wrap" slot="left" @click="goBack">
				<view class="arrow  mr-30">
					<u-icon name="arrow-left" color="#000"></u-icon>
				</view>
				<view class="avatar mr-20">
					<image mode="widthFix" :src="item.avatar"></image>
				</view>
				<view class="username">{{item.username}}</view>
			</view>
		</u-navbar>
		<swiper :interval="3000" :duration="1000" :current="current" @change="onChange">
			<swiper-item v-for="item in imageList" :key="item">
				<!-- <view class="swiper-item"></view> -->
				<image :src="item" class="swiper-item"></image>
			</swiper-item>
		</swiper>
		<view class="dot-wrap">
			<view class="dot" v-for="(item, index) in imageList" :key="index" :class="{active: current === index}">
			</view>
		</view>
		<view class="content">
			<view class="title">{{item.title}}</view>
			<view class="text">{{item.content}}</view>
			<view class="create-time">
				{{item.utcCreate}} 发布
			</view>
		</view>

		<!-- 评论 -->
		<!-- <view class="ipt-wrap">
			<u-textarea v-model="value3" placeholder="请输入内容" autoHeight class="ipt"></u-textarea>
		</view>
		<commentVue></commentVue> -->

	</view>
</template>

<script>
	// import commentVue from './components/comment.vue';
	export default {
		data() {
			return {
				bgColor: '#f5edea',
				current: 0,
				value3: '',


				imageList: [],
				item: {

				},
			};
		},
		// components: {
		// 	commentVue,
		// },
		onShow() {

		},

		onLoad(options) {
			if (options.item) {
				try {
					const item = JSON.parse(decodeURIComponent(options.item));
					this.item = item;
					// 或者，如果你需要数组形式，且字符串是用逗号分隔的多个图片地址
					this.imageList = item.images ? item.images.split(';') : [];
				} catch (e) {
					console.error('解析item失败', e);
				}
			}
		},


		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},


			onChange(e) {
				this.current = e.detail.current
			}
		},

	}
</script>

<style>
	page {
		color: #3D3D3D;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.left-wrap {
		display: flex;
		align-items: center;
		justify-content: center;

		.avatar {
			width: 68rpx;
			height: 68rpx;
			background-color: #D8D8D8;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.username {
			font-size: 36rpx;
			font-weight: 500;
		}
	}

	swiper {
		height: 342rpx;
		opacity: 1;

		background: #F7F5F4;

		.swiper-item {
			width: 100%;
			height: 100%;
		}
	}

	.dot-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;

		.dot {
			width: 10rpx;
			height: 10rpx;
			background: #303030;
			border-radius: 50%;
			margin-left: 20rpx;
		}

		.dot.active {
			background-color: #f5edea;
		}
	}

	.content {
		margin: 38rpx;

		.title {
			font-size: 42rpx;
			font-weight: 600;
			color: #333;
		}

		.text {
			font-size: 28rpx;
			font-weight: normal;
			line-height: 52rpx;
			letter-spacing: 0.08em;
			margin: 10rpx 2rpx;
		}

		.create-time {
			text-align: right;
			font-size: 20rpx;
			font-weight: normal;
			line-height: 52rpx;
			letter-spacing: 0.08em;
			color: #999999;
		}
	}

	.ipt-wrap {

		// height: 66rpx;
		border-radius: 8rpx;
		opacity: 1;
		margin: 0 38rpx 24rpx;
		background: #F3F3F3;
		box-sizing: border-box;


		/deep/.u-textarea {
			text-indent: 48rpx;
			background-color: #F3F3F3 !important;
			font-size: 12px !important;
			border: 0;

			.u-textarea__field {
				font-size: 12px !important;
			}
		}
	}
</style>